<template>
	<view class="tab-bar">
		<view 
			v-for="(item, index) in tabList" 
			:key="index"
			class="tab-item"
			:class="{ active: currentPath === item.pagePath }"
			@click="handleClick(item)"
		>
			<image :src="getTabIcon(item)" mode="aspectFit" />
			<text>{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
import { ref, computed } from 'vue'
import * as uniApi from '@/common/utils/uni-api'

export default {
	name: 'TabBar',
	props: {
		current: {
			type: String,
			default: 'index'
		}
	},
	setup(props) {
		// tab列表配置
		const tabList = [
			{
				pagePath: '/pages/index/index',
				iconPath: '/static/qietu/index.png',
				selectedIconPath: '/static/qietu/index-selected.png',
				text: '首页'
			},
			{
				pagePath: '/pages/menu/menu',
				iconPath: '/static/qietu/menu.png',
				selectedIconPath: '/static/qietu/menu-selected.png',
				text: '点餐'
			},
			{
				pagePath: '/pages/order/order',
				iconPath: '/static/qietu/order.png',
				selectedIconPath: '/static/qietu/order-selected.png',
				text: '订单'
			},
			{
				pagePath: '/pages/mine/mine',
				iconPath: '/static/qietu/mine.png',
				selectedIconPath: '/static/qietu/mine-selected.png',
				text: '我的'
			}
		]

		// 获取当前页面路径
		const currentPath = computed(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			return '/' + currentPage?.route || '/pages/index/index'
		})

		// 获取tab图标
		const getTabIcon = (item) => {
			return currentPath.value === item.pagePath ? item.selectedIconPath : item.iconPath
		}

		// 点击处理
		const handleClick = (item) => {
			if (currentPath.value === item.pagePath) return
			uniApi.switchTab(item.pagePath)
		}
		
		return {
			tabList,
			currentPath,
			getTabIcon,
			handleClick
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%; 
	background: #fff;
	display: flex;
	padding: 12rpx 0;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom:12rpx;
		}
		
		text {
			font-size: 12px;
			color: #999;
		}
		
		&.active {
			text {
				color: var(--primary-color);
			}
			
			image {
				filter: drop-shadow(0 0 4rpx rgba(76, 217, 100, 0.4));
			}
		}
	}
}

// 暗黑模式适配
[data-theme='dark'] {
	.tab-bar {
		background: #2B2B2C;
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
		
		.tab-item {
			text {
				color: #666;
			}
			
			&.active {
				text {
					color: var(--primary-color);
				}
			}
		}
	}
}
</style> 